<template>
  <div class="scssComp flex-center">
    <div class="scssComp-child1">AAAAAAA</div>
    <div class="scssComp-child2">
      AAAAAAA
      <div
        shadow
        class="scssComp-child2-child2_1"
      >子子</div>
      <div class="scssComp-child2-child2_2">
        伪元素
      </div>
    </div>
    <div
      pointer
      class="scssComp-child3 bigBorder"
    >AAAAAAA</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.scssComp {
  .hw {
    height: 200px;
    width: 300px;
  }

  $width: 5px;
  /* 父选择器 &- */
  &-child1 {
    @extend .hw;
    border: $width solid red;
  }
  &-child2 {
    @extend .hw;
    border: $width solid;
    &-child2_1 {
      height: 50px;
      width: 50px;
      border: 1px solid purple;
    }
    &-child2_2 {
      /* 伪元素 */
      &::before {
        content: '';
        background: black;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: relative;
        margin-right: 2px;
      }
    }
  }
  &-child3 {
    @extend .hw;
  }
}
</style>
